<template>
  <Card>
    <div slot="title">
      <span style="line-height:32px; height:32px;">定时任务</span>
      <Button @click="onCreateType" style="float:right">新增</Button>
    </div>
    <tables
      ref="tables"
      editable
      search-place="top"
      v-model="tableData"
      :columns="columns"
      :loading="loading"
      :plusSearch="plusSearch"
      :hasOperation="hasOperation"
      @on-search="getDataOnSearch"
      @on-refresh="getData"
      @on-save-edit="onSaveEdit"
      @on-row-click="onRowClick"
      />
    <!-- <div style="margin-top:10px;">
      <Page
      :total="page.total"
      :current='page.current'
      :page-size='page.pageSize'
      :page-size-opts='page_size_opts'
      @on-page-size-change="getDataByChangeSize"
      @on-change="getData"
      show-sizer />
    </div> -->
    <!-- 新增或者编辑 -->
    <Modal
        v-model="showTypeModal"
        :title="typeModalTitle"
        @on-ok="save">
      <Form :model="taskData" :label-width="80">
        <FormItem label="任务名称">
            <Input v-model="taskData.jobName" placeholder="任务名称"></Input>
        </FormItem>
        <FormItem label="目标字符串">
            <Input v-model="taskData.invokeTarget" placeholder="目标字符串"></Input>
        </FormItem>
        <FormItem label="执行表达式">
            <Input v-model="taskData.cronExpression" placeholder="执行表达式"></Input>
        </FormItem>
        <FormItem label="执行策略">
            <RadioGroup v-model="taskData.misfirePolicy">
                <Radio label="1">立即执行</Radio>
                <Radio label="2">执行一次</Radio>
                <Radio label="3">放弃执行</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="并发执行">
            <RadioGroup v-model="taskData.concurrent">
                <Radio label="0">允许</Radio>
                <Radio label="1">禁止</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="状态">
            <RadioGroup v-model="taskData.status">
                <Radio label="0">正常</Radio>
                <Radio label="1">停止</Radio>
            </RadioGroup>
        </FormItem>
        <!-- <FormItem>
            <Button type="primary">提交</Button>
        </FormItem> -->
      </Form>
    </Modal>
  </Card>
</template>
<style lang='less' scoped>

</style>
<script>
import Tables from '_c/tables'
import api from '@/api/base/task'

export default {
  name: 'Task',
  components: {
    Tables
  },
  data () {
    return {
      // 表单
      showTypeModal: false,
      typeModalTitle: '新增',
      taskData: {
        jobId: '',
        jobName: '测试任务',
        invokeTarget: 'ryTask.ryNoParams',
        cronExpression: '0/10 * * * * ?',
        misfirePolicy: '0',
        status: '0',
        createTime: ''
      },
      saveStatus: 'add',
      // table变量
      loading: false,
      hasOperation: false,
      plusSearch: false,
      searchValue: '',
      columns: [
        { title: '任务名称', key: 'jobName', editable: true },
        { title: '任务组名', key: 'jobGroup', editable: true },
        { title: '目标字符串', key: 'invokeTarget' },
        { title: 'cron执行表达式', key: 'cronExpression', editable: true },
        { title: 'cron计划策略', key: 'misfirePolicyDesc' },
        { title: '任务状态', key: 'statusDesc' },
        { title: '创建时间', key: 'createTime' },
        {
          title: '操作',
          key: 'handle',
          width: '300',
          button: [ (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.toggleTaskStatus(params.index)
                  }
                }
              }, '切换状态'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.runTask(params.index)
                  }
                }
              }, '执行一次'),
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.showEditModal(params.index)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.removeRow(params.index)
                  }
                }
              }, '删除')
            ])
          }]
        }
      ],
      tableData: []
    }
  },
  methods: {
    // 查询
    getDataOnSearch (searchObj) {
      console.log(searchObj)
      this.page.current = 1
      this.getData(searchObj)
    },
    onCreateType () {
      this.showTypeModal = true
      this.typeModalTitle = '新增'
      this.saveStatus = 'add'
    },
    showEditModal (index) {
      this.showTypeModal = true
      this.typeModalTitle = '编辑'
      const row = this.tableData[index]
      this.taskData = row
      this.saveStatus = 'edit'
    },
    onRowClick (row, index) {
      this.$emit('on-row-click', row, index)
    },
    save () {
      if (this.saveStatus === 'add') {
        this.doAdd()
      } else {
        this.doEdit()
      }
    },
    doAdd () {
      api.add(this.taskData).then(res => {
        this.getData()
      }).catch(e => {
        console.log(e)
      })
    },
    doEdit () {
      api.edit(this.taskData).then(res => {
        this.getData()
      }).catch(e => {
        console.log(e)
      })
    },
    async onSaveEdit (params) {
      this.loading = true
      const key = params.column.key
      // Object.assign(params.row, { key : params.value})
      this.$set(params.row, key, params.value)
      await api.update(params.row)
      this.loading = false
    },
    removeRow (index) {
      const row = this.tableData[index]
      const r = confirm('确认删除么')
      if (r) {
        api.remove(row.jobId).then(res => {
          this.getData()
        })
      }
    },
    /**
     * 执行一次任务
     */
    runTask (index) {
      this.currentSelectedRow = this.tableData[index]
      console.log(this.currentSelectedRow)
      // this.showTypeDetailModal = true
      api.runTask(this.currentSelectedRow.jobId).then(res => {
        if (res.data.code === 200) {
          this.$Message.success('执行成功')
        } else {
          this.$Message.error('执行失败')
        }
      })
    },
    /**
     * 切换任务状态
     */
    toggleTaskStatus (index) {
      this.currentSelectedRow = this.tableData[index]
      console.log(this.currentSelectedRow)
      api.toggleTaskStatus(this.currentSelectedRow.jobId).then(res => {
        this.$Message.success('切换成功')
        this.getData()
      })
    },
    onDetailCancel () {
      this.showTypeDetailModal = false
    },
    resetcurrentSelectedRow () {
      this.currentSelectedRow = {
        dictName: '',
        dictType: '',
        createdTime: '',
        updatedTime: ''
      }
    },
    // 单行选中
    onSelect (selection, row) {
      console.log(this.selectedRows)
      this.selectedRows = selection
    },
    getData (searchObj) {
      this.loading = true
      api.all().then(res => {
        // this.arrangeDataToTable(res.data.data)
        const list = res.data.data
        this.tableData = list
        this.loading = false
      }).catch(e => {
        console.log(e)
        this.loading = false
      })
    },
    getDataByChangeSize (index) {
      this.page.pageSize = index
      this.getData()
    }
  },
  mounted () {
    api.all().then(res => {
      const list = res.data.data
      this.tableData = list
    })
  }
}
</script>
